<template>
	<div class="flex_col card m5 p10">
		<img class="product_img" :src="model.url"/>
		<div class="flex_row_center mt5">
			<label style="font-size: 20px;">名称</label>
			<label class="ml5">{{ model.name }}</label>
		</div>
		<div class="flex_row_center mt5">
			<label style="font-size: 20px;">价格</label>
			<label class="ml5">{{ priceFormat(model.price) }}</label>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { product2ImageUrl } from '@/service/http';
import type { Product2 } from '@/service/model';
import { priceFormat } from '@/service/utils';
import { reactive } from 'vue';


interface Ctx {
	product: Product2
}

const props = defineProps<Ctx>();

interface Model {
	name: string,
	price: number,
	url: string,
}

const model = reactive<Model>({
	name: props.product.name,
	price: props.product.price,
	url: ""	
})

async function init() {
	try {
		const url = await product2ImageUrl(props.product.image_id);
		model.url = url;
	} catch (e) {
		console.log(e);
	} 
}

init();

</script>

<style scoped>

.product_img {
	width: 300px;
	aspect-ratio: 16 / 9;
	border-radius: 10px;
}

</style>
